import {card} from '../styles/components'
import {Box, FontIcon, Static} from '../components'


const Card = ({icon, title, content,height,width,fontSize,color}) => (
    <div className='box'>
        <Box flex='flex'height={height}>
            <FontIcon icon={icon || ''} fontSize={fontSize} color={color}/>
        </Box>

        <Box flex='flex' marginBottom='1rem'>
            <Static label={title} fontSize='1.25rem' color='#5f5f5f'/>
        </Box>

        <Box flex='flex' padding='0 2rem' style={{textAlign:'left'}}>
            <Static label={content} fontSize='.875rem' color='#b7b7b7'/>
        </Box>

        <style jsx>{`
            .box{
                background: #fff;
                height:20rem;
                width: ${width};
                transition: all .3s linear;

                &:hover{
                    margin-top: -1rem;
                    transform: translate(0);
                    box-shadow: 0 5px 20px rgba(0,0,0,.5);
                }
            }
        `}</style>
    </div>
);

export default Card